<template>
	<view class="w-100 bg-white">
		<view class="flex-1 mt-2 row font-s-4 text-light-muted" v-if="distriSubList.length == 0">无邀请用户</view>
		<view class="flex-1 mx-3 row-ac-sb py-3 border-bottom" v-for="(item,index) in distriSubList" :key="index" v-if="distriSubList.length > 0">
			<view class="flex-1 row-ac">
				<view class="head-image ml-4">
					<image :src="item.user_headimage" mode=""></image>
				</view>
				<view class="ml-2">
					<view class="font-s-5">{{ item.nick_name || item.user_name }}</view>
					<view class="font-s-2 text-muted mt">{{ item.user_phone | phoneFilter }}</view>
				</view>
			</view>
			<view class="font-s-2 text-muted">
				<view>注册时间:</view>
				<view>{{ item.create_time }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoUrl,
	} from '@/api/index.js';
	import {
		distributorsDetailUrl,
		commissionstatsUrl,
		distributorsSubUrl
	} from '@/api/promotion';
	import {
		nowFormatTime,
		formatTime
	} from '@/utils/time.js';
	export default {
		data() {
			return {
				userInfo:'',
				distriSubList: []
			}
		},
		filters:{
			phoneFilter(val) {
				let reg = /^(.{3}).*(.{4})$/;
				return val.replace(reg, "$1****$2");
			},
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.loginStatus = true
				this.getUserInfo()
			} else {
				this.loginStatus = false
			}
		},
		methods: {
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
					this.getDistributorsSub(this.userInfo.id)
				})
			},
			getDistributorsSub(userId) {
				this.$R.get(distributorsSubUrl + userId + '/').then(res => {
					this.distriSubList = res.data.list
					this.distriSubList = res.data.list.map(item => {
						item.create_time = nowFormatTime(item.create_time); // 格式化时间
						return item;
					});
					this.distriSubTotal = res.data.total
				})
			},
			toBack(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}
	.promotion-head{
		position: relative;
		.to-back{
			position: absolute;
			top: 90rpx;
			left: 30rpx;
		}
		.promotion-title{
			top: 150rpx;
			right: 90rpx;
			position: absolute;
		}
	}
	.user-img{
		width: 238rpx;
		height: 238rpx;
		border-radius: 50%;
		border: 20rpx solid #D2D2D2;
		image{
			width: 238rpx;
			height: 238rpx;
			border-radius: 50%;
		}
	}
	.head-image{
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		image{
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
		}
	}
</style>